﻿
@{
    ViewBag.Title = "IdleTimer";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Idle Timer</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Idle Timer</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Idle Timer</h5>
                </div>

                <div class="ibox-content">
                    <div class="alert alert-danger custom-alert" style="display: none">

                        Your time is up. But you can move your mouse and get back to app.

                    </div>
                    <strong>Idle Timer Plugin </strong>
                    <p>
                        Idle plugin provides you a way to monitor user activity with a page.Idle is defined by not moving the mouse, scrolling the mouse wheel and using the keyboard.
                    </p>

                    <div class="text-center p-lg h-200">

                        <h3>Please do not move the mouse for 5 seconds</h3>
                        <i class="fa fa-hand-o-up fa-4x"></i>

                    </div>

                    <p>
                        There are two ways to instantiate. Either statically, or on an element. Element bound timers
                        will only watch for events inside of them. You may just want page-level activity, in which
                        case you may set up your timers on <code>document</code>, <code>document.documentElement</code>, and <code>document.body</code>.
                        Instantiate returns jQuery for chaining.
                    </p>

                    <p>Example usage</p>
                    <pre>
$(function() {
    // Set idle time
    $( document ).idleTimer( 5000 );
});
$(function() {
    $( document ).on( "idle.idleTimer", function(event, elem, obj){
        // function you want to fire when the user goes idle
    });
    $( document ).on( "active.idleTimer", function(event, elem, obj, triggerevent){
        // function you want to fire when the user becomes active again
    });
});</pre>

                </div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    @Styles.Render("~/plugins/toastrStyles")
}

@section Scripts {
    @Scripts.Render("~/plugins/idletimer")
    @Scripts.Render("~/plugins/toastr")

    <script type="text/javascript">
        $(document).ready(function () {

            // Set idle time
            $(document).idleTimer(5000);

        });

        $(document).on("idle.idleTimer", function (event, elem, obj) {
            toastr.options = {
                "positionClass": "toast-top-right",
                "timeOut": 8000
            }

            toastr.warning('You can call any function after idle timeout.', 'Idle time');
            $('.custom-alert').fadeIn();
            $('.custom-alert-active').fadeOut();

        });

        $(document).on("active.idleTimer", function (event, elem, obj, triggerevent) {
            // function you want to fire when the user becomes active again
            toastr.clear();
            $('.custom-alert').fadeOut();
            toastr.success('Great that you decided to move a mouse.', 'You are back. ');



        });
    </script>
}




